<template>
	<view>
		<top-navbar title="修改配送时间"></top-navbar>
		<view class="container">
			<view class="wapper">
				<view class="row" @tap="timeChange">
					<text class="label">将</text>
					<view class="txt acea-row row-between-wrapper">
						<view class="" v-if="timeTxt.no">
							<text>第{{ numberToUpperCase(timeTxt.no) }}次</text>
							<text class="splitline">/</text>
							<text>{{ timeTxt.delivery_day }}</text>
							<text class="splitline">/</text>
							<text>{{ getWeek(new Date(timestampToTime(timeTxt.delivery_time))) }}</text>
						</view>
						<text v-else>{{ timeTxt }}</text>
						<text class="iconfont icon-xiangyou"></text>
					</view>
				</view>
				<view class="row" @tap="reviceTimeChange">
					<text class="label">顺延提前至</text>
					<view class="txt acea-row row-between-wrapper">
						<view class="" v-if="reviceTime.time">
							<text>{{ reviceTime.time }}</text>
							<text class="splitline">/</text>
							<text>{{ getWeek(new Date(reviceTime.time)) }}</text>
						</view>
						<text v-else>{{ reviceTime }}</text>
						<text class="iconfont icon-xiangyou"></text>
					</view>
				</view>
				<view class="row acea-row row-between-wrapper">
					<text class="label">后续自动延期</text>
					<switch
						:checked="isNext" 
						@change="nextChange" 
						color="#a7cf54" 
						style="transform:scale(0.7); margin-right: -20rpx;" 
					/>
				</view>
				<view class="row acea-row row-between-wrapper">
					<text class="label">仅修改本期</text>
					<switch
						:checked="isOne" 
						@change="oneTimeChange" 
						color="#a7cf54" 
						style="transform:scale(0.7); margin-right: -20rpx;" 
					/>
				</view>
			</view>
			<view class="bnt bg-green" @click="submitInfo">提交</view>
			<view class="tips acea-row row-center-wrapper">修改须至少提前收花3天且12点之前操作</view>
		</view>
		<!-- 选择配送时间 -->
		<wyb-popup ref="popup" type="bottom" radius="6" :showCloseIcon="false">
		    <view class="popup-content">
		        <view class="title acea-row row-center row-middle">
					选择配送时间
					<text class="iconfont icon-guanbi" @click='close'></text>
				</view>
				<scroll-view class="pop-body" :scroll-y="true">
					<view
						class="item acea-row row-center row-middle" 
						:class="active==index?'bg-gray' : ''"
						v-for="(item,index) in cartArr" 
						:key="index"
						@click="rowClick(index, item)"
					>
						<view class="name">
							<text>第{{ numberToUpperCase(item.no) }}次</text>
							<text class="splitline">/</text>
							<text>{{ item.delivery_day }}</text>
							<text class="splitline">/</text>
							<text>{{ getWeek(new Date(timestampToTime(item.delivery_time))) }}</text>
						</view>
					</view>
				</scroll-view>
		    </view>
		</wyb-popup>
		<!-- 选择收花日期 -->
		<wyb-popup ref="popup1" type="bottom" radius="6" :showCloseIcon="false">
		    <view class="popup-content">
		        <view class="title acea-row row-center row-middle">
					选择收花日期
					<text class="iconfont icon-guanbi" @click='close1'></text>
				</view>
				<scroll-view class="pop-body" :scroll-y="true">
					<view
						class="item acea-row row-center row-middle" 
						:class="act==index?'bg-gray' : ''"
						v-for="(item,index) in reviceTimeList" 
						:key="index"
						@click="itemClick(index, item)"
					>
						<view class="name">
							<text>{{ item.time }}</text>
							<text class="splitline">/</text>
							<text>{{ getWeek(new Date(item.time)) }}</text>
						</view>
					</view>
				</scroll-view>
		    </view>
		</wyb-popup>
		<!-- 修改收货日成功 -->
		<wyb-popup ref="popup2" type="center" radius="6" :height="300" :showCloseIcon="false">
		    <view class="popup-content acea-row row-column-between" style="padding: 0 30rpx 0;">
		        <view class="txt acea-row row-center row-middle">
		        	修改收货日成功
		        </view>
				<!-- $refs.popup2.hide() -->
				<view class="foot" @click="editSuc">确定</view>
		    </view>
		</wyb-popup>
	</view>
</template>

<script>
	import wybPopup from '@/components/wyb-popup/wyb-popup.vue';
	import { getChangeTime, editOrderTime } from '@/api/order.js'
	export default {
		components: {
			wybPopup,
		},
		data() {
			return {
				isNext: false,
				isOne: true,
				cartArr: [],
				active: -1,
				timeTxt: '(第几次配送时间进行修改)',
				reviceTimeList: [],
				reviceTime: '(选择提前时间)',
				act: -1,
				childId: ''
			};
		},
		onLoad(opt) {
			if(opt.orderId) {
				this.childId = opt.childId
				this.getChangeTime(opt.orderId)
				
			} else {
				this.$util.Tips({
					title: '缺少必要的参数'
				}, {tab:3,url:'/pages/users/child_order_detail/child_order_detail'});
			}
		},
		methods: {
			// 获取时间选项、
			getChangeTime(id) {
				getChangeTime({
					order_id: id
				}).then(res => {
					let index = res.data.lists.findIndex(el => el.id == this.childId)
					if(index != -1) {
						this.timeTxt = res.data.lists[index]
						this.active = index
					}
					this.cartArr = res.data.lists
					this.reviceTimeList = res.data.optional
				})
			},
			// 后续自动延期
			nextChange(e) {
				const { value } = e.detail
				this.isNext = value
				this.isOne = !value
			},
			// 仅修改本期
			oneTimeChange(e) {
				const { value } = e.detail
				this.isOne = value
				this.isNext = !value
			},
			// 配送时间选择弹框
			timeChange() {
				this.$refs.popup.show()
			},
			close() {
				this.$refs.popup.hide()
			},
			// 收花日期选择
			reviceTimeChange() {
				this.$refs.popup1.show()
			},
			close1() {
				this.$refs.popup1.hide()
			},
			rowClick(index, item) {
				this.active = index
				this.timeTxt = item
				this.close()
			},
			itemClick(index, item) {
				this.act = index
				this.reviceTime = item
				this.close1()
			},
			// 提交时间修改
			submitInfo() {
				if(!this.timeTxt.id) {
					return this.$util.Tips({
						title: '请选择要修改的订单'
					});
				}
				if(!this.reviceTime.time) {
					return this.$util.Tips({
						title: '请选择顺延时间'
					});
				}
				editOrderTime({
					shippingId: this.timeTxt.id, //月配订单ID
					orderId: this.timeTxt.oid, // 主订单ID
					change_type: this.isNext ? 2 : 1, // 修改类型【1=修改本期，2=顺延修改】
					delivery_time: this.reviceTime.time // 修改时间，2021-11-20
				}).then(res => {
					if(res.status == 200) {
						this.$refs.popup2.show()
					} else {
						this.$util.Tips({
							title: res.msg
						});
					}
				}).catch(err => {
					this.$util.Tips({
						title: err
					});
				})
				
			},
			// 日期修改成功
			editSuc() {
				this.$refs.popup2.hide();
				uni.navigateBack({ //返回订单详情页
					delta: 2
				})
			},
			timestampToTime(timestamp) {
				var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
				var D = date.getDate() + ' ';
				var h = date.getHours() + ':';
				var m = date.getMinutes() + ':';
				var s = date.getSeconds();
				// return Y+M+D+h+m+s;
				return Y+M+D;
			},
			numberToUpperCase(textIndex) {
			    let newString = '';
			    let newTextIndex = textIndex + '';
			
			    function sum(value, index) {
					var newValue = '';
					if ((textIndex === 9)) {
						return !index ? '十' : '';
					}
					let isSeat = (~~textIndex > 9 && ~~textIndex < 19);
					switch (~~value) {
						case 1:
						  newValue = !index ? (isSeat ? '' : '一') : '十一';
						  break;
						case 2:
						  newValue = !index ? (isSeat ? '' : '二') : '十二';
						  break;
						case 3:
						  newValue = !index ? (isSeat ? '' : '三') : '十三';
						  break;
						case 4:
						  newValue = !index ? (isSeat ? '' : '四') : '十四';
						  break;
						case 5:
						  newValue = !index ? (isSeat ? '' : '五') : '十五';
						  break;
						case 6:
						  newValue = !index ? (isSeat ? '' : '六') : '十六';
						  break;
						case 7:
						  newValue = !index ? (isSeat ? '' : '七') : '十七';
						  break;
						case 8:
						  newValue = !index ? (isSeat ? '' : '八') : '十八';
						  break;
						case 9:
						  newValue = !index ? (isSeat ? '' : '九') : '九十';
						  break;
						case 0:
						  newValue = '十';
						  break;
						default:
						  break;
					}
					return newValue;
			    }
			
			    for (let i = 0; i < newTextIndex.length; i++) {
			      newString += sum(newTextIndex.substring(i, i + 1), i);
			    }
			    return newString;
			},
			getWeek(date) {
			    var week;
			    if(date.getDay() == 0) week = "星期日"
			    if(date.getDay() == 1) week = "星期一"
			    if(date.getDay() == 2) week = "星期二"
			    if(date.getDay() == 3) week = "星期三"
			    if(date.getDay() == 4) week = "星期四"
			    if(date.getDay() == 5) week = "星期五"
			    if(date.getDay() == 6) week = "星期六"
			    return week;
			}
		}
	}
</script>

<style lang="scss">
.container {
	width: 100%;
	padding: 0 30rpx 100rpx;
	background-color: #fff;
	.wapper {
		width: 100%;
		.row {
			display: flex;
			align-items: center;
			width: 100%;
			height: 100rpx;
			border-bottom: 1px solid #eee;
			.label {
				margin-right: 40rpx;
			}
			.txt {
				flex: 1;
				color: #999;
			}
		}
	}
	.bnt {
		width: 60%;
		height: 80rpx;
		border-radius: 40rpx;
		margin: 0 auto;
		margin-top: 100rpx;
		color: #fff;
		text-align: center;
		line-height: 80rpx;
	}
	.tips {
		font-size: 24rpx;
		color: #999;
		margin-top: 50rpx;
	}
}
.splitline {
	margin: 0 10rpx;
}
.popup-content {
	position: relative;
	width: 100%;
	height: 100%;
	.title {
		position: relative;
		width: 100%;
		height: 100rpx;
		background-color: #eee;
		border-radius: 20rpx 20rpx 0 0;
		font-size: 32rpx;
		font-weight: 700;
		.iconfont {
			position: absolute;
			top: 50%;
			right: 30rpx;
			transform: translate(0,-50%);
			background-color: #333;
			color: #fff;
			border-radius: 50%;
			padding: 10rpx;
			font-size: 20rpx;
		}
	}
	.pop-body {
		height: 400rpx;
		max-height: 600rpx;
		padding: 30rpx 0;
	}
	.item {
		width: 100%;
		height: 80rpx;
		padding: 0 30rpx;
	}
	.bg-gray {
		background-color: #eee;
	}
	.txt {
		flex: 1;
		font-size: 30rpx;
	}
	.foot {
		// position: absolute;
		// bottom: 0;
		width: 100%;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		border-top: 1px solid #ccc;
		color: #1ABB1D;
		font-size: 30rpx;
	}
}
</style>
